<template>
  <el-container style="height:100%;" class="main">
    <el-aside class="menu-aside" style="width:auto;background: #304156 ">

      <el-menu
        :router="true"
        :default-active="activeIndex"
        :default-openeds="defaultOpeneds"
        class="el-menu-vertical-demo"
        :unique-opened="true"
        @select="handleSelect"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse">
        <div  class="logo" style="background: #304156;font-size: 20px">
          <span v-if="!isCollapse" ><b>乐乐买菜ERP系统</b> </span>
          <span v-else>
            <i class="el-icon-hot-water"></i>
          </span>
        </div>
        <!--          <el-menu-item index="/" style="background: #304156;color: white">-->
        <!--              <i class="el-icon-s-home"></i>-->
        <!--              <span slot="title">首页</span>-->
        <!--          </el-menu-item>-->

        <el-menu-item @click="mendianji(menu)" :key="menu.id" :index="menu.url" v-for="menu in menuList">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
        </el-menu-item>

        <!--          <el-submenu v-for="menu in menuList" :key="menu.id" :index="menu.url">-->
        <!--            <template slot="title">-->
        <!--                <i :class="menu.icon"></i><span slot="title">{{menu.name}}</span>-->
        <!--            </template>-->
        <!--               <el-menu-item v-for="menu2 in menu.children" :key="menu2.id" :index="menu2.url">{{menu2.name}}</el-menu-item>-->
        <!--          </el-submenu>-->
      </el-menu>
    </el-aside>
    <el-container class="app-container no-border" >
      <el-header style="background: #304156;">
        <el-row>
          <el-col :span="12">
              <span class="collapse-icon" @click="isCollapse=!isCollapse"  >
                <i class="el-icon-s-unfold" v-if="isCollapse"></i>
                <i class="el-icon-s-fold " v-else ></i>
              </span>
          </el-col>
          <el-col :span="12" class="header-user">
            <el-dropdown @command="handleCommand">

              <span class="login_user_name">
                <i class="el-icon-s-custom" style="color: white"></i>
                {{loginUserName}}
                <i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="resetPwd">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退 出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="padding: 15px; background-color:rgb(238, 241, 246);">
        <!--          <el-container class="container-title" >-->
        <!--            <el-breadcrumb separator="/">-->
        <!--                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
        <!--                <el-breadcrumb-item v-if="page2State">{{page2}}</el-breadcrumb-item>-->
        <!--                <el-breadcrumb-item v-if="page3State">{{page3}}</el-breadcrumb-item>-->
        <!--            </el-breadcrumb>-->
        <!--          </el-container>-->
<!--        <div>-->
<!--          <router-view></router-view>-->
<!--        </div>-->

        <el-card shadow="hover">
          <router-view></router-view>
        </el-card>
      </el-main>
      <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="500px">

        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--          <el-form-item label="原密码" prop="oldPwd">-->
<!--            <el-input type="password" v-model="ruleForm.oldPwd"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button size="medium" type="primary" @click="tijiao">提交</el-button>
            <el-button size="medium" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </el-container>
</template>

<script>
import request from '@/utils/request'

import logo from '../assets/logo.png'
export default {
  name: 'HelloWorld',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      logo,
      dialogVisible:false,
      ruleForm: {
        pass: '',
        checkPass: '',
        oldPwd: ''
      },
      rules: {
        oldPwd: [
          { required: true, message: "原密码不能为空", trigger: "blur" }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
      page2:"首页",
      page3:"首页",
      page2State:false,
      page3State:false,
      activeIndex:"bb",
      editableTabsValue: '2',
      editableTabs: [{
        title: '首页',
        name: '0',
        content: '',
        index:0
      }],
      tabIndex: 1,
      isCollapse: false,
      defaultOpeneds:['1'],
      menuList:[
        // {icon:'el-icon-s-home',name:'首页',id:'1000',url:'/home',params:[{'add':true,}]},
        // {icon:'el-icon-s-data',name:'采购计划',id:'1008',url:'/procurementPlan',params:[{'add':true,}]},
        // {icon:'el-icon-truck',name:'采购单',id:'1001',url:'/theDocumentary'},
        // {icon:'el-icon-discount',name:'入库单',id:'1002',url:'/putInStorage'},
        // {icon:'el-icon-pie-chart',name:'总仓生产单',id:'1007',url:'/production'},
        // {icon:'el-icon-phone',name:'调拨单',id:'1003',url:'/transfers'},
        // {icon:'el-icon-user-solid',name:'人工校正',id:'1004',url:'/artificial'},
        // {icon:'el-icon-edit-outline',name:'盘盈盘亏',id:'1005',url:'/inventory'},
        // {icon:'el-icon-collection',name:'应付账款（财务）',id:'1006',url:'/accountsPayable'},

      ],
      loginUserName:localStorage.getItem("loginUserName"),
    }
  },
  created: function () {
    // console.log(this.$route.path);
    this.activeIndex = this.$route.path;
    if( this.$route.path == "/home" ||  this.$route.path == "/"){
      this.page2State = false;
      this.page3State = false;
    }else{
      this.page3 =  this.$route.name;
      this.page2 =  this.$route.matched[0].name;
      this.page2State = true;
      this.page3State = true;
    }
    //获取路由
    this.getluyou()
  },
  methods: {
    getluyou:function (){
      request({
        url: '/getRoutersLinShi',
        method: 'get',
      }).then(response => {
        if(response.code=='200'){
          this.menuList = response.data.menuList

        }else {

          this.$message({
            type: 'warning',
            message:response.msg
          });
        }
      });
    },
    //点击
    mendianji:function (row){
      console.log( '点击',row);
      //删除 0是不展示  1是展示
      if(row.perms){
        localStorage.setItem("delete",row.perms.delete)
        //保存
        localStorage.setItem("add",row.perms.add)
        //审核
        localStorage.setItem("audit",row.perms.audit)
      }

    },
    handleSelect(index, indexPath) {
      console.log( '路由点击',index, indexPath);
    },
    //提交
    tijiao:function (){
      if(!this.ruleForm.pass){
        this.$message({
          type: 'warning',
          message:'密码不能为空！'
        });
        return
      }
      if(this.ruleForm.pass!=this.ruleForm.checkPass){
        this.$message({
          type: 'warning',
          message:'两次输入密码不一样！'
        });
        return
      }
      var obj={}
      obj.password = this.ruleForm.pass
      request({
        url: '/system/sysUser/resetPassWord',
        method: 'PUT',
        data:obj
      }).then(response => {
        if(response.code=='200'){
          localStorage.setItem("token",'');
          this.$router.push({ path: "/login"});
          this.$message({
            type: 'success',
            message:response.msg
          });
        }else {
          this.$message({
            type: 'warning',
            message:response.msg
          });
        }

      });
    },
    //重置
    chongzhi:function (){
      this.ruleForm.pass=''
      this.ruleForm.checkPass=''
      this.ruleForm.oldPwd=''
    },
    handleCommand(commad){
      // console.log(commad)
      if(commad == 'logout'){
        localStorage.setItem("token",'');
        this.$router.push({ path: "/login"});
      }else if(commad == 'resetPwd'){
        this.ruleForm.pass=''
        this.ruleForm.checkPass=''
        this.ruleForm.oldPwd=''
        this.dialogVisible=true

      }
    }
  },
  watch: {
    '$route' (route) {
      console.log(route);
      this.activeIndex = route.path;
      if(route.path == "/home" || route.path == "/"){
        this.page2State = false;
        this.page3State = false;
      }else{
        this.page3 = route.name;
        this.page2 = route.matched[0].name;
        this.page2State = true;
        this.page3State = true;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.quanju{
  color: rebeccapurple;
}
.main .el-menu-item.is-active {
  background-color: #000000 !important;
}
.el-header {
  background-color: #409EFF;
  color:#fff;
  line-height: 60px;
  padding: 0 20px 0 10px;
}
.el-submenu .el-menu-item{min-width:0px;}
.el-aside {
  color: #333;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
i{
  font-size: 1.3em;
  vertical-align: middle;
}
.el-menu {
  border-right: 0px;
}
.collapse-icon{
  display: inline-block;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
}
.logo{
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  background-color: #409EFF;
  color: #fff;
  width:100%;
}
.app-container{
  height:100%;
  border: 1px solid #eee
}
.header-user{
  text-align: right;
  font-size: 12px;
  color:#FFf;
}
.login_user_name{
  font-size: 16px;
  color:#FFf;
  display: inline-block;
}
.login_user_name i{
  margin-top: -1px;
  display: inline-block;
}
a{
  text-decoration: none;
}
.no-border{
  border: none;
}
.container-title{
  margin: -15px -15px 15px -15px;
  padding: 15px 20px;
  background-color: #ffffff;
  border-left: 1px solid #eef1f6;
}



</style>
